<template>
    <div
            class="el-input-tag input-tag-wrapper"
            @click="foucusTagInput">
        <el-tag
                v-for="(tag, idx) in innerTags"
                :key="tag.Tag2"
                :closable="!readOnly"
                :disable-transitions="false"
                @close="remove(idx,tag.MyPK,tag.Tag2)">
            {{tag.Tag2}}
        </el-tag>
        <el-autocomplete
                v-model.trim="SearchKey"
                :fetch-suggestions="querySearch"
                :placeholder="placeholder"
                style="outline:none;border:none;"
                @select = "handleSelect"
                clearable
        ></el-autocomplete>
    </div>
</template>

<script>
    import { GetPara } from "@/api/Gener.js";
    export default {
        name: 'ElInputTag',
        props: {

            mapExt:{
                type:Object,
                default: () =>{}
            },

            readOnly: {
                type: Boolean,
                default: false
            },
            placeholder:{
                type:String
            }

        },
        data () {
            return {
                params:{},
                SearchKey: '',
                innerTags: [],
                dialog_temp: {},
                selectVal:""
            }
        },
        created(){
            this.params=this.$store.getters.getData;
            let str = GetPara(this.mapExt,"SearchTip");
            this.placeholder=str==null || str==undefined||str==""?this.placeholder:str;
            var frmEleDBs = new this.Entities("BP.Sys.FrmEleDBs");
            frmEleDBs.Retrieve("FK_MapData", this.mapExt.FK_MapData, "EleID", this.mapExt.AttrOfOper, "RefPKVal",this.params.WorkID);
            var _this=this;
            this.$.each(frmEleDBs,function(i,item){
                this.selectVal +=item.Tag2+",";
                _this.innerTags.push({
                    MyPK:item.MyPK,
                    Tag1:item.Tag1,
                    Tag2:item.Tag2
                })
            });
            this.tagChange();

        },
        watch: {

        },
        methods: {
            foucusTagInput () {
                if (this.readOnly || !this.$el.querySelector('.tag-input')) {
                    return
                } else {
                    this.$el.querySelector('.tag-input').focus()
                }
            },
            // handleSelect是自己实现的方法
            handleSelect(item) {
                let addSuucess = false
                if (this.addTag(item)) {
                    addSuucess = true
                }
                if (addSuucess) {
                    this.tagChange();
                    this.SearchKey = ''
                }

            },
            addNew (e) {
                if (e && (!this.addTagOnKeys.includes(e.keyCode)) && (e.type !== 'blur')) {
                    return
                }
                if (e) {
                    e.stopPropagation()
                    e.preventDefault()
                }
                let addSuucess = false
                if (this.SearchKey.includes(',')) {
                    this.SearchKey.split(',').forEach(item => {
                        if (this.addTag(item.trim())) {
                            addSuucess = true
                        }
                    })
                } else {
                    if (this.addTag(this.SearchKey.trim())) {
                        addSuucess = true
                    }
                }
                if (addSuucess) {
                    this.tagChange()
                    this.SearchKey = ''
                }
            },
            addTag (item) {
                if (item && this.selectVal.includes(item.value)==false) {
                    //保存数据
                    var frmEleDB = new this.Entity("BP.Sys.FrmEleDB");
                    frmEleDB.MyPK = this.mapExt.AttrOfOper + "_" + this.params.WorkID + "_" + item.No;
                    frmEleDB.FK_MapData = this.mapExt.FK_MapData;
                    frmEleDB.EleID = this.mapExt.AttrOfOper;
                    frmEleDB.RefPKVal = this.params.WorkID;
                    frmEleDB.Tag1 = item.No;
                    frmEleDB.Tag2 = item.value;
                    frmEleDB.Save();
                    this.innerTags.push({
                        MyPK:frmEleDB.MyPK,
                        Tag1:frmEleDB.Tag1,
                        Tag2:frmEleDB.Tag2
                    });
                    this.selectVal+=frmEleDB.Tag2+",";
                    return true;
                }
                return false;

            },
            remove (index,myPK,name) {
                this.innerTags.splice(index, 1)
                this.selectVal=this.selectVal.replace(name+",","");
                this.tagChange();
                //删除存储的数据
                var frmEleDB = new this.Entity("BP.Sys.FrmEleDB");
                frmEleDB.MyPK = myPK;
                frmEleDB.Delete();

            },
            removeLastTag () {
                if (this.SearchKey) {
                    return
                }
                this.innerTags.pop()
                this.tagChange()
            },
            tagChange () {
                let val="";
                if(this.selectVal.includes(","))
                    val=this.selectVal.substring(0,this.selectVal.length-1)
                this.$emit('input', val);
            },

            // 下面两个方法是autocomplete相关的搜索方法
            querySearch(queryString, cb) {

                let doc = this.mapExt.Doc;
                //替换里面的@符号
                doc = doc.replace(/@Key/g,this.SearchKey);
                let data = this.DBAccess.RunDBSrc(doc,this.mapExt.DBType);
                let results=[];
               data.forEach(item=>{
                   results.push({
                       No:item.No,
                       value:item.Name
                   })
               });
                cb(results);
            },
        }
    }
</script>

<style scoped>
    .input-tag-wrapper {
        position: relative;
        font-size: 14px;
        background-color: #fff;
        background-image: none;
        border-radius: 4px;
        border: 1px solid #dcdfe6;
        box-sizing: border-box;
        color: #606266;
        display: inline-block;
        outline: none;
        padding: 0 10px 0 5px;
        transition: border-color .2s cubic-bezier(.645,.045,.355,1);
        width: 100%;
    }

    .el-tag {
        margin-right: 4px;
    }

    .tag-input {
        background: transparent;
        border: none!important;
        font-size: 14px;
        height: 40px;
        outline: none;
        padding-left: 0;
        width: 100px;
    }

    .el-input-tag--mini .tag-input{
        height: 28px;
        line-height: 28px;
    }

    .el-input-tag--small .tag-input{
        height: 32px;
        line-height: 32px;
    }

    .el-input-tag--medium .tag-input{
        height: 36px;
        line-height: 36px;
    }

    /* 下面这个的效果是autocomplete的input没有边框*/
    /deep/ input {
        /* input { */
        /* background-color: red!important;  调试用的样式 */
        outline:none!important;
        border:none!important;
    }
</style>